<template>
  <div class="char1">
    <!-- 自定义一个div来装我们的图 -->
    <div id="main" style="width: 90%; height: 800px"></div>
  </div>
</template>
<script>
var echarts = require("echarts");

var xData = [];
var yData = [];

export default {

  data() {
    return {
      data5: {},
    };
  },

  methods: {
    
    //设置显示echart图表
    getChart() {
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "案例查看高校排名信息",
        },
        toolbox: {
          show: true,
          title: "高校成绩",
          feature: {
            dataView: {
              show: true,
            },
            saveAsImage: {
              type: "png",
              show: true,
            },
            magicType: {
              show: true,
              type: ["bar", "line"],
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          data: ["成绩"],
        },
        xAxis: {
          data: xData,
          //数据项太多，斜着显示
          axisLabel: {
            interval: 0,
            padding: [0, -5],
            rotate: 45,
          },
        },
        yAxis: {},
        series: [
          {
            name: "成绩",
            type: "bar",
            data: yData,
          },
        ],
      };
      myChart.setOption(option);
    },



    init() {
      var that = this;

      this.$axios
        .request({
          url: "http://localhost:3000/schoolpm",
          method: "get",
        })
        .then(function (response) {
          if (response.status === 200) {
            //如果获取数据成功，
            //获取查询结果集
            let  rs=response.data
            console.log(rs);

            var length = rs.length;
            for (var i = 0; i < length; i++) {
              let xdata_i = rs[i]["school_name"];
              if (xdata_i !== null) {               
                xData.push(xdata_i); //设置横坐标数据(标签)
                console.log("xData_i="+xdata_i)
              }
              let ydata_i = rs[i]["qk_count"];
              if (ydata_i !== null) {
                yData.push(ydata_i); //设置纵坐标数据(数值)
                console.log("yData_i="+ydata_i)
              }
            }
          }
          console.log(xData);
          console.log(yData);
          //设置到 echarts 里面去
           that.getChart();
        })
        .catch(function (reason) {
          console.log(reason);
        });
    },
  },
  watch: {
    //数据变化时自动重画，在控制台修改message,会自动重画
    message: function () {
      this.draw();
    },
  },
  mounted() {
    //页面加载的时候，调用画图方法，画图
    this.init();
  },
};
</script>

<style scoped>
.char1 {
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 160px;
}
</style>



